<template>
	<view v-if="details && details.venueName" class="box" :style="theme">
		<view class="detailsTop flex-cb"
			:class="details.status==1 || details.status==3?'registeredEndColor':details.status==5 || details.status==6?'finishedColor':'underwayColor'">
			<view>
				<view class="f36 cf fwb">{{details.projectName}}约球-{{details.dateLimit}}</view>
				<view class="f26 cf op8 mt24">发起人：{{details.creatorName}}</view>
			</view>
			<image :src="imgHost+'/ic_yuyue.png'"></image>
		</view>
		<view class="detailsBottom">
			<!-- 场地信息 -->
			<view class="">
				<view class="f32 c2 fwb">场地信息</view>
				<view class="mt30 flex-left">
					<view class="c6 f28">活动场馆：</view>
					<view class="c2 f28">{{details.venueName}}</view>
				</view>
				<view class="mt30 flex-left">
					<view class="c6 f28">活动场地：</view>
					<view class="c2 f28">{{details.siteName}}</view>
				</view>
				<view class="cut-off"></view>
			</view>

			<!-- 活动信息 -->
			<view>
				<view class="f32 c2 fwb">活动信息</view>
				<view class="mt30 flex-left apply">
					<view class="c6 f28">报名人员：</view>
					<view class="c2 f28 flex-cl" style="width: 78%;">
						<view class="c2 f28 flex-left">
							限
							<text class="cDD5040 f28">{{details.numLow}}~{{details.numUp}}</text>
							人
							<view class="longString"></view>
							已报名
							<text class="cDD5040 f28">{{details.numJoin}}</text>
							人
						</view>
						<view class="peopleList">
							<view class="flex-center mt30 mr47" v-for="(items, index) in details.members" :key="index">
								<image :src="items.showAvatar || imgHost+'/user.png'" class="headPortrait"></image>
								<view class="f24 c3 mt16">{{items.nickName}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="mt30 flex-left">
					<view class="c6 f28">活动时间：</view>
					<view class="c2 f28">{{details.date}} {{details.beginTime}} 至 {{details.endTime}}</view>
				</view>
				<view class="mt30 flex-left">
					<view class="c6 f28">报名截止：</view>
					<view class="c2 f28">{{details.dateLimit}}</view>
				</view>
				<view class="mt30 flex-left apply">
					<view class="c6 f28">活动说明：</view>
					<view class="c2 f28 activeDetails">{{details.info || ''}}</view>
				</view>
			</view>
		</view>

		<!-- 报名中 -->
		<view class="bottomState flex-cb">
			<view v-if="details.status==6" class="f28 c9">已取消</view>
			<view v-if="details.status==1" class="f28 cDD5040">待支付</view>
			<view v-if="details.status==4" class="f28 c4167C1">进行中</view>
			<view v-if="details.status==2" class="f28 cDD5040">报名中</view>
			<view v-if="details.status==4" class="f28 cDD5040">已报名</view>
			<view v-if="details.status==3" class="f28 c6">报名截止</view>
			<view v-if="details.status==5" class="f28 c9">已结束</view>
			<view class="flex-left">
				<view v-if="details.status==1&&userInfo.id==details.creator" class="cancel" @click="cancelMeet(1)"
					style="margin-right: 20rpx;">取消支付</view>
				<view v-if="details.status>1&&details.status<4&&userInfo.id==details.creator" class="cancel" @click="cancelMeet(2)"
					style="margin-right: 20rpx;">取消订单</view>
				<view v-if="details.status==1&&userInfo.id==details.creator" class="registerNow" @click="jump2('/pages/order/pay?type=1&businessId=', details.reserveId)">立即支付
				</view>
				<button v-if="details.status==2" class='share' open-type="share">立即分享</button>
				<view v-if="details.status==2&&userInfo.id!=details.creator&&details.myStatus==2" class="registerNow"
					@click="enrollMeet">立即报名</view>
				<view v-if="details.status==2&&userInfo.id!=details.creator&&details.myStatus==1" class="cancel"
					@click="NoEnrollMeet" style="margin-left: 20rpx;">取消报名</view>
			</view>
		</view>
		<!-- 删除订单弹框 -->
		<u-overlay :show="show">
			<view class="wrapper">
				<view class="block">
					<view class="block_title">提示</view>
					<view class="block_info">是否确定取消{{type==1?'支付':'订单'}}</view>
					<view class="block_footer">
						<view class="block_footer_a" @click="onClickHide">取消</view>
						<view class="block_footer_b" @click="$noMultipleClicks(submitdele)">确定</view>
					</view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				noClick: true,
				id: '',
				show: false,
				type: 1,
				details: {}
			}
		},
		onLoad(ops) {
			this.id = ops.id
			this.getDetail()
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			cancelMeet(type) {
				this.show = true
				this.type = type
			},
			onClickHide() {
				this.show = false
			},
			enrollMeet() {
				this.$app.ajax({
					api: this.$api.enrollMeet(),
					data: {
						userId: this.userInfo.id,
						param: {
							venueId: this.venueId,
							meetId: this.id
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.$app.showToast('报名成功')
						setTimeout(()=> {
							this.jump3('/pages/member/myAboutball?active=3')
						}, 1500)
					}
				}).catch(() => {})
			},
			NoEnrollMeet() {
				this.$app.ajax({
					api: this.$api.NoEnrollMeet(),
					data: {
						userId: this.userInfo.id,
						param: {
							venueId: this.venueId,
							meetId: this.id
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.$app.showToast('取消报名成功')
						this.getDetail()
					}
				}).catch(() => {})
			},
			submitdele() {
				let that = this
				if (this.type == 1) {
					this.$app.ajax({
						api: this.$api.bookingCancellation(),
						data: {
							userId: this.userInfo.id,
							param: {
								reserveAndOrderId: this.details.reserveId
							}
						}
					}).then((res) => {
						if (res.errorCode === '000000') {
							this.$app.showToast('取消支付成功')
							setTimeout(() => {
								that.jump('/pages/home/index', '', 1)
							}, 1000)
						}
					}).catch(() => {})
				} else {
					this.$app.ajax({
						api: this.$api.sessionEstimation(),
						data: {
							userId: this.userInfo.id,
							param: {
								reserveAndOrderId: this.details.reserveId
							}
						}
					}).then((res) => {
						if (res.errorCode === '000000') {
							this.$app.showToast('取消订单成功')
							setTimeout(() => {
								that.jump('/pages/home/index', '', 1)
							}, 1000)
						}
					}).catch(() => {})
				}
			},
			getDetail() {
				this.$app.ajax({
					api: this.$api.infoMeet(),
					data: {
						userId: this.userInfo.id,
						param: {
							meetId: this.id
						}
					},
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.details = res.record
					} else {
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 500)
					}
				}).catch(() => {})
			}

		}

	}
</script>
<style scoped lang="scss">
	.detailsTop {
		padding: 30rpx;
		position: relative;
	}

	.detailsTop image {
		width: 142rpx;
		height: 132rpx;
		position: absolute;
		bottom: 0;
		right: 30rpx;
	}

	.detailsBottom {
		padding: 40rpx 30rpx;
		background-color: #fff;
		position: relative;
	}

	.cut-off {
		height: 1rpx;
		background-color: #e5e5e5;
		margin: 40rpx 0;
	}

	.longString {
		width: 4rpx;
		height: 24rpx;
		background-color: #999;
		margin: 0 10rpx;
	}

	.headPortrait {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
	}

	.apply {
		align-items: flex-start;
	}

	.peopleList {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.activeDetails {
		width: 78%;
	}

	.bottomState {
		width: 100%;
		padding: 16rpx 30rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		box-sizing: border-box;
		overflow: hidden;
	}

	.share {
		height: 68rpx;
		padding: 0 34rpx;
		color: $color;
		border: 1px solid $color;
		background-color: #fff;
		font-size: 28rpx;
		border-radius: 36rpx;
		line-height: 68rpx;
	}

	.registerNow {
		height: 68rpx;
		padding: 0 34rpx;
		color: #fff;
		background-color: $color;
		font-size: 28rpx;
		border-radius: 36rpx;
		line-height: 68rpx;
		margin-left: 20rpx;
	}

	.cancel {
		height: 68rpx;
		padding: 0 34rpx;
		color: #666666;
		border: 1px solid #999999;
		font-size: 28rpx;
		border-radius: 36rpx;
		line-height: 68rpx;
	}

	/* 已报名/报名结束背景色 */
	.registeredEndColor {
		background: $phb;
	}

	/* 进行中背景色 */
	.underwayColor {
		background: $blueBg;
	}

	/* 已结束背景色 */
	.finishedColor {
		background: #CCCCCC;
	}
</style>
